<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<title>关于pushState使用对象参数的示例</title>
	<style>
		*
		{
			margin: 2px;
			padding: 4px;
			border-collapse: collapse;
		}
	</style>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<!-- 定义页头 -->
<table border="1">
	<tr><th>Name</th><td id="name"></td></tr>
	<tr><th>Color</th><td id="color"></td> </tr>
	<tr><th>Size</th><td id="size"></td> </tr>
	<tr><th>State</th><td id="state"></td></tr>
	<tr><th>Event</th><td id="event"></td> </tr>
</table>
<p>如果有了历史记录，点击浏览器的前进或后退按钮，event和state的值将发生变化。</p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<!-- JavaScript脚本链接请在此处插入 -->
<script>
	if(window.history.state)
	{
		displayState(window.history.state);
		document.getElementById('state').innerHTML = 'Yes';
	}
	else
	{
		document.getElementById('name').innerHTML = 'No Selection';
	}

	window.onpopstate = function(e)
	{
		displayState(e.state);
		document.getElementById('event').innerHTML = 'Yes';
	}

	var buttons = document.getElementsByTagName('button');
	for(var i = 0; i < buttons.length; i++)
	{
		buttons[i].onclick = function(e)
		{
			var stateObject;
			if(e.target.id == 'banana')	{
				stateObject = {
					name: 'banana',
					color: 'yellow',
					size: 'large'
				};
			}
			else
			{
				stateObject = {
					name: 'apple',
					color: 'red',
					size: 'medium'
				};
			}

			window.history.pushState(stateObject, '');
			displayState(stateObject);
		};
	}

	function displayState(stateObject)
	{
		document.getElementById('name').innerHTML = stateObject.name;
		document.getElementById('color').innerHTML = stateObject.color;
		document.getElementById('size').innerHTML = stateObject.size;

	}
</script>
</body>
</html>